<template>
  <!-- 最外层容器：占满视口高度，减去页面边距
  <div class="min-h-[calc(100vh-48px)] bg-white rounded-xl p-6 shadow-md">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-bold text-gray-800">作品评分详情</h2>
    </div> -->
  <div>
    <!-- 24栅格布局：左侧16列(2/3)，右侧8列(1/3) -->
    <el-row :gutter="30" class="h-[calc(100vh-120px)]"> <!-- 减去顶部标题栏高度 -->
      <!-- 左侧：PDF预览区域 -->
      <el-col :span="16" class="h-full"> <!-- 强制占满行高 -->
        <div class="bg-gray-50 rounded-lg overflow-hidden h-full flex flex-col"> <!-- 垂直弹性布局 -->
          <div class="p-4 border-b">
            <h3 class="font-bold">论文预览</h3>
          </div>
          
          <!-- PDF容器：使用视口单位精确计算高度 -->
          <div class="pdf-container relative overflow-auto">
            <iframe 
              :src="pdfUrl" 
              frameborder="0" 
              class="w-full h-full"
              @load="onPdfLoaded"
              @error="handlePdfError"
            ></iframe>
            
            <!-- 加载状态遮罩 -->
            <div v-if="pdfLoading" class="loading-mask">
              <el-loading-spinner size="large"></el-loading-spinner>
            </div>
            
            <!-- PDF加载失败提示 -->
            <div v-if="pdfError" class="error-mask">
              <div class="text-center">
                <i class="fa fa-exclamation-circle text-red-500 text-2xl mb-2"></i>
                <p>论文加载失败，请稍后重试</p>
              </div>
            </div>
          </div>
        </div>
      </el-col>


      <!-- 右侧：评分操作区域 -->
      <el-col :span="8">
        <div class="space-y-6 h-full flex flex-col"> <!-- 垂直布局，按钮区域靠下 -->
          <!-- 分数输入 -->
          <div class="bg-gray-50 rounded-lg p-4">
            <h3 class="font-bold mb-3">分数</h3>
            <el-form :model="scoreForm" label-width="80px" :rules="scoreRules" ref="scoreFormRef">
              <el-form-item label="总分" prop="totalScore">
                <el-input-number
                  v-model.number="scoreForm.totalScore"
                  :min="0"
                  :max="100"
                  :precision="1"
                  size="large"
                  class="w-full"
                  placeholder="请输入0-100分"
                />
              </el-form-item>
            </el-form>
          </div>

          <!-- 备注输入 -->
          <div class="bg-gray-50 rounded-lg p-4 flex-grow"> <!-- 占满中间空间 -->
            <h3 class="font-bold mb-3">备注</h3>
            <el-input 
              type="textarea" 
              v-model="scoreForm.comment" 
              :rows="6" 
              placeholder="请输入详细评语（至少10个字）..."
              size="large"
              class="w-full h-full"
            />
          </div>

          <!-- 操作按钮（靠下显示） -->
          <div class="space-y-4 mt-auto">
            <el-button 
              type="primary" 
              size="large"
              :loading="submitLoading"
              @click="submitScore"
              class="w-full"
            >
              <i class="fa fa-check-circle mr-2"></i>提交评分
            </el-button>
            
            <el-button 
              type="info" 
              size="large"
              :loading="downloadLoading"
              @click="downloadSupplementaryMaterials"
              class="w-full"
            >
              <i class="fa fa-download mr-2"></i>下载支撑材料
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElForm } from 'element-plus'

// 表单数据
const scoreForm = reactive({
  totalScore: null, // 总分（初始为null，强制输入）
  comment: ''       // 备注
})

// 表单验证规则
const scoreRules = {
  totalScore: [
    { required: true, message: '请输入总分', trigger: 'blur' },
    { type: 'number', min: 0, max: 100, message: '分数必须在0-100之间', trigger: 'blur' }
  ]
}

// 状态管理
const pdfLoading = ref(true)       // PDF加载状态
const pdfError = ref(false)        // PDF加载错误
const submitLoading = ref(false)   // 提交评分加载状态
const downloadLoading = ref(false) // 下载材料加载状态
const pdfUrl = ref('http://127.0.0.1/222.pdf') // PDF地址
const scoreFormRef = ref(null)     // 表单引用

// PDF加载完成
const onPdfLoaded = () => {
  pdfLoading.value = false
  pdfError.value = false
}

// PDF加载失败
const handlePdfError = () => {
  pdfLoading.value = false
  pdfError.value = true
  ElMessage.error('论文加载失败，请检查文件地址是否正确')
}

// 提交评分（模拟）
const submitScore = async () => {
  // 表单验证
  const valid = await scoreFormRef.value.validate()
  if (!valid) return

  // 验证备注长度
  if (scoreForm.comment.trim().length < 10) {
    ElMessage.warning('备注至少需要10个字')
    return
  }

  submitLoading.value = true
  try {
    // 模拟API请求（实际项目替换为真实接口）
    const mockApi = new Promise(resolve => {
      setTimeout(() => {
        resolve({ code: 200, message: '评分提交成功' })
      }, 1000)
    })

    const res = await mockApi
    if (res.code === 200) {
      ElMessage.success(res.message)
      // 重置表单
      scoreForm.totalScore = null
      scoreForm.comment = ''
      scoreFormRef.value.resetFields()
    }
  } catch (error) {
    ElMessage.error('提交失败，请稍后重试')
    console.error('评分提交错误：', error)
  } finally {
    submitLoading.value = false
  }
}

// 下载支撑材料（模拟）
const downloadSupplementaryMaterials = async () => {
  downloadLoading.value = true
  try {
    // 模拟API请求（实际项目替换为真实下载接口）
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟文件下载（真实项目替换为接口返回的blob）
    const link = document.createElement('a')
    link.href = 'javascript:void(0)' // 真实项目替换为接口地址
    link.download = '支撑材料_' + new Date().getTime() + '.zip'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    ElMessage.success('支撑材料下载成功')
  } catch (error) {
    ElMessage.error('下载失败，请稍后重试')
    console.error('下载错误：', error)
  } finally {
    downloadLoading.value = false
  }
}

// 页面加载时检查PDF地址
onMounted(() => {
  // 实际项目可在此处动态获取PDF地址（如从路由参数）
  console.log('当前论文地址：', pdfUrl.value)
})
</script>

<style scoped>
/* PDF容器样式（关键：精确计算高度） */
.pdf-container {
  height: calc(100vh - 180px); /* 视口高度减去顶部标题栏、左侧标题栏和边距 */
  width: 100%;
  position: relative;
  overflow: auto; /* 内容超出时滚动 */
}

.pdf-container iframe {
  width: 100%;
  height: 100%;
}

/* 加载遮罩 */
.loading-mask {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 错误遮罩 */
.error-mask {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 20px;
}

/* 深度选择器：确保栅格高度生效 */
:deep(.el-row) {
  height: 100% !important;
}

:deep(.el-col) {
  height: 100% !important;
}
</style>